<!doctype html>

<meta charset="utf-8">
<title>Dagre D3 Demo: Arrows</title>

<link rel="stylesheet" href="demo.css">
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="../dagre-d3.js"></script>

<style id="css">
body {
  font: 300 14px 'Helvetica Neue', Helvetica;
}

.node rect,
.node circle,
.node ellipse {
  stroke: #333;
  fill: #fff;
  stroke-width: 1px;
}

.edgePath path {
  stroke: #333;
  fill: #333;
  stroke-width: 1.5px;
}
</style>

<h1>Dagre D3 Demo: Arrows</h1>

<svg width=960 height=600><g/></svg>

<section>
<p>A sample that shows the different arrows available in dagre-d3.
</section>

<script id="js">
// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});

["normal", "vee", "undirected"].forEach(function(arrowhead) {
  g.setNode(arrowhead + "1", { label: " " });
  g.setNode(arrowhead + "2", { label: " " });
  g.setEdge(arrowhead + "1", arrowhead + "2", {
    arrowhead: arrowhead,
    label: arrowhead
  });
});

var svg = d3.select("svg"),
    inner = svg.select("g");

// Set up zoom support
var zoom = d3.zoom().on("zoom", function() {
      inner.attr("transform", d3.event.transform);
    });
svg.call(zoom);

// Create the renderer
var render = new dagreD3.render();

// Run the renderer. This is what draws the final graph.
render(inner, g);

// Center the graph
var initialScale = 0.75;
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));

svg.attr('height', g.graph().height * initialScale + 40);
</script>

<script src="demo.js"></script>
